<template>
  <div class="album-container">
    <h1>巡机检查</h1>

    <!-- 输入相册链接和描述 -->
    <div class="input-section">
      <input v-model="newImageUrl" placeholder="请输入图片链接" />
      <button @click="addAlbum" :disabled="isLoading">
        {{ isLoading ? '上传中...' : '添加图片' }}
      </button>
    </div>

    <!-- 相册列表 -->
    <div class="album-list">
      <div v-for="(album, index) in albums" :key="index" class="album-item">
        <div class="card">
          <img :src="album.url" alt="图片" />
          <div class="description-container">
            <p>{{ album.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';

const { proxy } = getCurrentInstance();
import img1 from '@/assets/demo/1.png';
import img2 from '@/assets/demo/2.png';
import img3 from '@/assets/demo/3.png';
import img4 from '@/assets/demo/4.png';

// 定义响应式变量
const newImageUrl = ref('');
const newDescription = ref('');
const albums = ref([
  {
    url: img1,
    description: '电脑主机被放置在纸箱中，旁边散落着各种线缆，电脑主机下方有一块红色的布料，地上还有一些红色的污渍。电脑主机的上方有一台显示器，显示器的下方也散落着各种线缆。整个场景显得有些凌乱',
  },
  {
    url: img2,
    description: `图片中可能存在的异常和安全隐患如下：
电气设备过热：电气设备过热可能是由于过载、短路、接触不良等原因引起的。过热可能导致电气设备损坏，甚至引发火灾。
电气设备损坏：电气设备损坏可能是由于长期使用、老化、损坏等原因引起的。损坏的电气设备可能会导致电气故障，甚至引发火灾。
电气线路老化：电气线路老化可能是由于长期使用、老化、损坏等原因引起的。老化或损坏的电气线路可能会导致电气故障，甚至引发火灾。
电气设备安装不当：电气设备安装不当可能是由于安装人员不专业、安装环境不安全等原因引起的。安装不当的电气设备可能会导致电气故障，甚至引发火灾。
电气设备使用不当：电气设备使用不当可能是由于使用人员不专业、使用环境不安全等原因引起的。使用不当的电气设备可能会导致电气故障，甚至引发火灾。
为了确保电气设备的安全使用，建议定期检查电气设备的运行状态，及时更换老化或损坏的电气设备，正确安装和使用电气设备，避免电气设备过载、短路等故障的发生。`,
  },

  {
    url: img4,
    description: '根据图片，该电脑主机的风扇正在工作，冒出大量白烟，这可能是由于过热或短路等原因导致的。这种情况可能会导致电脑损坏或引发火灾等安全隐患，因此存在安全隐患。',
  },
  {
    url: img3,
    description: `图片电线裸露老坏，如果继续使用可能存在安全问题，可能接触不良导致无法正常使用。`,
  },
]);

const conversation_id = ref();
const isLoading = ref(false);

const createSession = async (isCreate = false) => {
  if (localStorage.getItem(conversation_id.value)) {
    conversation_id.value = JSON.parse(localStorage.getItem(conversation_id.value));
  } else {
    const res = await proxy?.$api.post("https://api.coze.cn/v1/conversation/create", {}, {
      headers: {
        'Authorization': 'Bearer pat_0rsfwJGRJe4P5KGkhVlYFj8HWqi2jc3Jbj3wJkV1E7t5A8TDXJP4pa94qHkESiTx',
        "Content-Type": "application/json"
      },
    });
    conversation_id.value = res.data.id;
    localStorage.setItem(conversation_id.value, JSON.stringify(conversation_id.value));
  }
};

const sendMessage = async (sendText) => {
  await proxy?.$api.post(`https://api.coze.cn/v3/chat?conversation_id=${conversation_id.value}`, {
    bot_id: "7482027291959246900",
    user_id: "1234",
    stream: false,
    auto_save_history: true,
    additional_messages: [
      {
        role: "user",
        content: '判断图片链接是否存在异常或者安全隐患' + sendText,
        content_type: "text"
      }
    ]
  }, {
    headers: {
      Authorization: 'Bearer pat_0rsfwJGRJe4P5KGkhVlYFj8HWqi2jc3Jbj3wJkV1E7t5A8TDXJP4pa94qHkESiTx',
      "Content-Type": "application/json",
    },
  });
};

const maxRetries = 10; // 最大重试次数
const retryInterval = 3000; // 每次重试间隔时间（毫秒）

const getMessagesWithRetry = async (retryCount = 0) => {
  try {
    const res = await proxy?.$api.get(`https://api.coze.cn/v1/conversation/message/list?conversation_id=${conversation_id.value}`, {
      order: "ASC"
    }, {
      headers: {
        Authorization: 'Bearer pat_0rsfwJGRJe4P5KGkhVlYFj8HWqi2jc3Jbj3wJkV1E7t5A8TDXJP4pa94qHkESiTx',
        "Content-Type": "application/json",
      },
    });

    if (res.data[0].role === 'assistant' && res.data[0].content.length > 6) {
      newDescription.value = res.data[0].content;
      albums.value.push({
        url: newImageUrl.value,
        description: newDescription.value
      });
      newImageUrl.value = ''
      isLoading.value = false; // 数据返回后关闭加载状态
    } else if (retryCount < maxRetries) {
      setTimeout(() => {
        getMessagesWithRetry(retryCount + 1);
      }, retryInterval);
    } else {
      isLoading.value = false; // 超出重试次数后关闭加载状态
      return null;
    }
  } catch (error) {
    isLoading.value = false; // 发生错误后关闭加载状态
    return null;
  }
};

const addAlbum = async () => {
  if (newImageUrl.value) {
    isLoading.value = true; // 开始加载
    await sendMessage(newImageUrl.value);
    await getMessagesWithRetry();
  } else {
    alert('请填写完整的相册链接');
  }
};

onMounted(() => {
  createSession();
});
</script>

<style scoped>
.album-container {
  max-width: 1310px;
  margin: 0 auto;
  padding: 20px;
  font-size: 16px;
  height: 860px;
  overflow-y: scroll;
  /* background-color: red; */
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.input-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 1260px;
}

.input-section input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-section button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: auto;
}

.input-section button:hover {
  background-color: #0056b3;
}

.input-section button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.album-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  /* 确保从左到右排列 */
}

.album-item {
  width: 300px;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.description-container {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  flex-grow: 1;
  overflow-y: auto;
  max-height: 150px;
  /* 固定最大高度 */
}

.description-container p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
</style>